<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>企业账户注册</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px 50px;
      background-color: #f5f5f5;
    }


    label {
      display: block;
      margin-bottom: 8px;
    }

    input {
      width: 100%;
      padding: 8px;
      margin-bottom: 12px;
      box-sizing: border-box;
    }

    button {
      background-color: #467ef4;
      color: white;
      padding: 10px 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      width: 150px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 10px;

    }

    button:hover {
      background-color: #467ef4;
    }

    .box1 {
      font-size: 18px;
      margin-top: 20px;
    }

    .registrationForm {
      width: 100%;
      height: 400px;
      background-color: #fff;
      display: flex;
      justify-content: space-around;
      padding-top: 30px;
      position: relative;
    }

    .box1-text {
      color: #21a2f1;
      font-size: 12px;
      margin-left: 10px;
    }

    input {
      margin-top: 10px;
      width: 330px;
      height: 30px;
    }

    .registrationForm1 {
      padding: 30px 20px;
      background-color: #fff;
    }

    .cl1 {
      margin-right: 200px;
    }

    .cl2 {
      margin-right: 150px;
    }

    .biio {
      margin-top: 30px;
    }

    .box1-text1 {
      padding: 5px;
      background-color: #f5f5f5;
      font-size: 14px;
      margin-left: 5px;
      color: #666;
    }

    .registrationForm2 {
      padding: 30px 20px;
      background-color: #fff;
    }

    .see {
      color: #5083f3;
      font-size: 14px;
      margin-left: 20px;
    }

    .cl3 {
      margin-right: 200px;
    }

    .cl4 {
      margin-right: 168px;
    }

    .text {
      position: absolute;
      left: 350px;
      display: inline;
    }
    .p {
      display: flex;
      align-items: center;
      width: 300px;
      justify-content: space-between;
    }
  </style>
</head>

<body>
  <h2>企业账户信息</h2>
  <div class="box1">企业账户信息 <span class="box1-text">未完成认证</span></div>
  <hr>

  <div class="registrationForm">
    <!-- left -->
    <div>
      <label for="companyName">企业名称:</label>
      <input type="text" id="companyName" name="companyName" required>

      <label for="email">登录域名:</label>
      <input type="email" id="email" name="email" required>

      <label for="password">手机:</label>
      <input type="password" id="password" name="password" required>

      <label for="confirmPassword">地址:</label>
      <input type="password" id="confirmPassword" name="confirmPassword" required>
    </div>
    <!-- right -->
    <div>
      <label for="companyName">企业账户:</label>
      <input type="text" id="companyName" name="companyName" required>

      <label for="email">企业联系人:</label>
      <input type="email" id="email" name="email" required>

      <label for="password">邮箱:</label>
      <input type="password" id="password" name="password" required>

      <label for="confirmPassword">管理员:</label>
      <input type="password" id="confirmPassword" name="confirmPassword" required>
      <button type="button" onclick="submitForm()">保存</button>
    </div>
    <div>
      <label for="companyName">法人:</label>
      <input type="text" id="companyName" name="companyName" required>

      <label for="email">企业类型:</label>
      <input type="email" id="email" name="email" required>

      <label for="password">成立日期:</label>
      <input type="date" id="password" name="password" required>

      <label for="confirmPassword">企业类型</label>
      <div class="p">
        <input type="checkbox" name="confirmPassword" required style="width: 20px;height: 20px">科技
        <input type="checkbox" name="confirmPassword" required style="width: 20px;height: 20px">传统
        <input type="checkbox" name="confirmPassword" required style="width: 20px;height: 20px">电商
        <input type="checkbox" name="confirmPassword" required style="width: 20px;height: 20px">创新
      </div>
      <button type="button" onclick="submitForm()">保存</button>
    </div>

  </div>
  <div class="box1">当前服务详情 <span class="box1-text">未完成认证</span></div>
  <hr>


  <div class="registrationForm1">
    <!-- top -->
    <div>
      <span class="cl1">套餐版本</span>
      <span>旗舰版(2019)</span>
    </div>
    <!-- bottom -->
    <div class="biio">
      <span class="cl2">剩余预付费金额</span>
      <span style="color: #666">￥0.0000</span>
    </div>

  </div>

  <div class="box1">在线服务 <span class="box1-text1">已开通</span></div>
  <hr>
  <div class="registrationForm2">
    <!-- top -->
    <div>
      <span class="cl1">在线坐席</span>
      <span>无限个</span>
      <span class="see">查看详情</span>
    </div>
    <!-- bottom -->
    <div class="biio">
      <span class="cl3">视频坐席</span>
      <span style="color: #666">0个</span>
      <span class="see">查看详情</span>
    </div>
    <div class="biio">
      <span class="cl4">视频时长余额</span>
      <span style="color: #666">0分钟</span>
      <span class="see">查看详情</span>
    </div>

  </div>

  <div class="box1">呼叫服务 <span class="box1-text1">试用中</span></div>
  <hr>
  <div class="registrationForm2">
    <!-- top -->
    <div>
      <span class="cl1">坐席数</span>
      <div class="text">
        <span>9999个</span>
        <span class="see">查看详情</span>
      </div>
    </div>
    <!-- bottom -->
    <div class="biio">
      <span class="cl3">资源包剩余</span>
      <div class="text">
        <span style="color: #666">0分钟</span>
        <span class="see">查看详情</span>
      </div>
    </div>
    <div class="biio">
      <span class="cl4">资源包已使用</span>
      <span class="text" style="color: #666">0分钟</span>
    </div>
    <div class="biio">
      <span class="cl4">号码租用数量</span>
      <div class="text">
        <span style="color: #666">0个</span>
        <span class="see">查看详情</span>
      </div>
    </div>
    <div class="biio">
      <span class="cl4">云号码数量</span>
      <span class="text" style="color: #666">0个</span>
    </div>
    <div class="biio">
      <span class="cl4">呼入计费</span>
      <span class="text" style="color: #666">免费</span>
    </div>

  </div>
  <div class="box1">多功能坐席服务 <span class="box1-text1">未开通</span></div>
  <hr>
  <script>
    function submitForm () {
      // 在这里可以添加表单验证逻辑和后端通信逻辑
      alert('表单提交成功！')
    }
  </script>

</body>

</html>